<template>
  <el-row :gutter="20" style="width: 1200px;margin: 0 auto">
    <el-col :span="6" style="margin: 10px 0" v-for="item in contentArr">
      <el-card>
        <router-link :to="'/detail?id='+item.id" style="text-decoration: none">
          <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 145px" >
          <p class="title_p">{{item.title}}</p>
        </router-link>

        <p>
          <el-avatar size="small" :src="BASE_URL+item.userImgUrl"></el-avatar>
          <span style="position: relative;bottom: 6px;left: 5px">{{item.nickname}}</span>
          <span style="float: right;font-size: 12px;color: #666">{{item.categoryName}}</span>
        </p>
      </el-card>
    </el-col>
  </el-row>
  <div style="text-align: center;margin-bottom: 20px">
    <el-button>点击加载更多资讯</el-button>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";

const contentArr=ref([
  {
    "id": 27,
    "title": "家常面包",
    "imgUrl": "/imgs/a.jpg",
    "categoryName": "面包",
    "nickName": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
  {
    "id": 18,
    "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
    "imgUrl": "/imgs/b.jpg",
    "categoryName": "家常菜",
    "nickName": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
  {
    "id": 17,
    "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
    "imgUrl": "/imgs/c.jpg",
    "categoryName": "小食",
    "nickName": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
  {
    "id": 16,
    "title": "蔓越莓绿豆糕，味道还不错值得一试!",
    "imgUrl": "/imgs/d.jpg",
    "categoryName": "面包",
    "nickName": "汤姆",
    "userImgUrl": "/imgs/head.jpg"
  },
])

const loadContents=()=>{
  if (location.search.includes('type')){
    let type=new URLSearchParams(location.search).get('type');
    //请求这个内容下的所有内容
    axios.get(BASE_URL+'/v1/contents/'+type+'/list')
        .then((response)=>{
          if (response.data.code==1){
            contentArr.value=response.data.data;
          }
        })
  }else if (location.search.includes('wd')){
    let wd=new URLSearchParams(location.search).get('wd')
    //发出搜索请求
    axios.get(BASE_URL+'/v1/contents/'+wd+"/search")
        .then((response)=>{
          if (response.data.code==1){
            contentArr.value=response.data.data;
          }
        })
  }
}

onMounted(()=>{//从其他页面到当前页面执行,从当前页面到当前页面时不执行
  loadContents();
})
onBeforeUpdate(()=>{//从其他页面到当前页面时不执行,从当前页面到当前页面时执行
  loadContents();
})
</script>

<style scoped>
.title_p {
  height: 40px;
  overflow: hidden; /*设置不显示*/
  /*设置序省略号修改样式*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-align-orient: vertical; /*纵向*/
}
a{
  color: #333;
  text-decoration: none;
}
a:hover{
  color: orange;
}
</style>